<script lang="ts" setup>
import AnimatedCircleCheck from '@/components/basic/animated-svg/AnimatedCircleCheck.vue'
import AnimatedCircle from '@/components/basic/animated-svg/AnimatedCircle.vue'
import AnimatedDangerCircle from '@/components/basic/animated-svg/AnimatedCircleFail.vue'
type statusType = 'wait' | 'process' | 'error' | 'success'
defineProps<{
  isLoading: boolean
  status: statusType
}>()
</script>

<template>
  <animated-circle
    color="#999999"
    size="30"
    :isAnimating="isLoading"
    v-if="isLoading || status === 'wait'"
  />
  <animated-circle
    color="#FF8140"
    size="30"
    :isAnimating="isLoading"
    v-else-if="isLoading || status === 'process'"
  />
  <animated-circle-check color="#39BCB7" size="30" v-if="!isLoading && status === 'success'" />
  <animated-danger-circle size="30" v-else-if="!isLoading && status === 'error'" />
</template>

<style scoped></style>
